<template>
  <!-- 隐患处理 -->
  <view class="task-contents">
    <view :class="['point-check', checkTitles.class]">
      {{ checkTitles.title }}
    </view>
    <view class="task-content">
      <view v-for="(item, index) in data" :key="index" class="grid-body">
        <view class="check grid-common">
          <view class="title flex items-center justify-between">
            <view class="flex align-center">
              <image class="icon-style" src="/static/images/gkicon1.png" mode="aspectFill"></image>
              <text>{{ item.productProcess }}</text>
            </view>
            <view class="task-status">
              <image class="icon-style" src="/static/images/starting.png" mode="aspectFill"></image>
            </view>
          </view>
          <view class="flex text">
            风险分析对象：
            <text>{{ item.riskObjName }}</text>
          </view>
          <view class="flex text">
            风险分析单元：
            <text>{{ item.riskUnitName }}</text>
          </view>
          <view v-if="item.dangerLevelLabel" class="flex text">
            重大危险源等级：
            <text class="bg-select" :class="styleSelector(item.dangerLevel)">
              {{ item.dangerLevelLabel }}
            </text>
          </view>
          <view class="flex text">
            风险等级：
            <text class="bg-select" :class="styleSelector(item.inherentRiskLevel)">{{
              item.inherentRiskLevelLabel
            }}</text>
          </view>
          <view class="flex text">
            排查开始时间：
            <uni-dateformat :date="item.planCheckStartTime" format="yyyy/MM/dd hh:mm"></uni-dateformat>
          </view>
          <view class="flex text">
            任务状态：
            <text>{{ item.taskStatusLabel }}</text>
          </view>
          <view class="flex text">
            管控措施类型：
            <text class="text-right1">{{ item.measureTypeLabel }}</text>
          </view>
          <view class="flex text">
            管控措施：
            <text class="text-right" style="word-wrap: break-word">{{ item.measureDesc }}</text>
          </view>

          <view class="footer-wrap">
            <view class="content-wrap"> 排查周期：{{ `${item.planCheckPeriod}${item.periodUnitLabel}` }} </view>
            <view class="button-wrap">
              <button
                class="button"
                @click="onHandle(item)"
                :disabled="
                  (positionCheckObj && (positionCheckObj.code == '2' || positionCheckObj.code == '3')) ||
                  positionCheck == '2' ||
                  positionCheck == '3'
                "
              >
                处理
              </button>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="submit-group">
      <button
        class="u-button block"
        :ripple="true"
        @click="submitAll()"
        :disabled="
          (positionCheckObj && (positionCheckObj.code == '2' || positionCheckObj.code == '3')) ||
          positionCheck == '2' ||
          positionCheck == '3'
        "
      >
        完成排查
      </button>
    </view>
  </view>
</template>

<script>
import { checkOccupy, batchHandle } from '@/api/dbd/controlCheck.js'
import { getPositionCheck } from '@/api/dbd/controlCheck.js'
import { managerSourceEnum } from '@/utils/constant.js'
export default {
  name: 'task',
  props: {
    data: {
      type: Array,
      default: () => []
    },
    positionCheckObj: {
      type: Object,
      default: () => {}
    },
    riskIdentificationId: {
      type: String | Number,
      default: ''
    }
  },
  data() {
    return {
      managerSourceEnum,
      textColor: true,
      positionCheck: '0'
    }
  },
  computed: {
    checkTitles() {
      let titles = {
        title: '',
        class: ''
      }
      if (this.positionCheckObj && this.positionCheckObj.code) {
        if (this.positionCheckObj.code == '1' || this.positionCheck == '1') {
          titles.title = '已到排查区域'
          titles.class = 'yesPoint'
        } else if (this.positionCheckObj.code == '2' || this.positionCheck == '2') {
          titles.title = '未到排查区域'
          titles.class = 'noPoint'
        } else if (this.positionCheckObj.code == '3' || this.positionCheck == '3') {
          titles.title = '定位卡异常，获取定位失败'
          titles.class = 'noPoint'
        } else {
          titles.title = ''
          titles.class = ''
        }
      }
      return titles
    }
  },
  methods: {
    styleSelector(option) {
      return 'level_' + option
    },
    navigateBack() {
      uni.navigateBack()
    },
    submitAll() {
      getPositionCheck(this.riskIdentificationId).then((res) => {
        this.positionCheck = res.data.code
        if (res.data.code == '2' || res.data.code == '3') {
          this.$modal.showToast('未到排查区域或定位卡异常')
          return
        } else {
          this.$modal.confirm('确定当前所有排查项均无隐患，并完成当前分析单元的所有排查任务').then(() => {
            let ids = ''
            this.data.forEach((item) => {
              ids += item.planTaskId + ','
            })
            batchHandle(ids).then((res) => {
              this.$modal.showToast('已经完成管控任务的排查')
              uni.navigateBack()
            })
          })
        }
      })
    },
    async onHandle(item) {
      let result = await getPositionCheck(this.riskIdentificationId)
      this.positionCheck = result.data.code
      if (result.data.code == '2' || result.data.code == '3') {
        this.$modal.showToast('未到排查区域或定位卡异常')
        return
      }
      // 0  未开始  1 进行中 2 已结束
      if (item.taskStatus == 0) {
        uni.showModal({
          title: '提示',
          content: '对应的排查任务暂未启动，请留意排查时间',
          showCancel: false,
          success: function (res) {
            if (res.confirm) {
              console.log('用户点击确定')
            }
          }
        })
        return
      }

      // 判断是否占用中
      // checkOccupy(item.planTaskId).then((res) => {
      // 	// 任务占用状态 1-空闲 0-占用
      // 	if (res.data.status === 1) {
      uni.navigateTo({
        url: `/pages/work/controlCheck/detail?managerSource=${managerSourceEnum.CONTROL}&planTaskId=` + item.planTaskId
      })
      // 	} else {
      // 		this.$modal.showToast(res.data.message);
      // 	}
      // });
      // this.$modal.confirm('确定处理该管控排查任务？').then(() => {
      // 	handle(id).then(res => {
      // 		this.$modal.showToast("已经完成管控任务的排查")
      // 		this.initData()
      // 	})
      // })
    }
  }
}
</script>

<style lang="scss" scoped>
.task-contents {
  .point-check {
    display: flex;
    justify-content: center;
    padding: 5px;
  }

  .noPoint {
    background-color: rgba(236, 128, 141, 0.333333333333333);
  }

  .yesPoint {
    background-color: rgba(112, 182, 3, 0.333333333333333);
  }

  .task-content {
    margin-bottom: 90px;
  }
}

.grid-body {
  margin-top: 24rpx;

  &:last-child {
    margin-bottom: 24rpx;
  }
}

.check {
  position: relative;

  .title {
    font-size: 34rpx;
    font-weight: 700;
    position: relative;

    .task-status {
      position: absolute;
      top: 10rpx;
      right: 0;

      .icon-style {
        width: 100rpx;
        height: 88rpx;
      }
    }
  }

  .icon-style {
    width: 52rpx;
    height: 52rpx;
    margin-right: 20rpx;
  }

  .text {
    color: #999;

    text {
      width: 62%;
      color: #333;
      display: inline-block;
    }

    .bg-select {
      display: inline-block;
      margin-left: 5px;

      i {
        display: inline-block;
        font-style: normal;
        margin-right: 5px;
      }

      &.level_1 {
        color: #a14430;
      }

      &.level_2 {
        color: #c87c32;
      }

      &.level_3 {
        color: #c4c088;
      }

      &.level_4 {
        color: #88b4c4;
      }
    }

    .text-right {
      width: 76%;
      text-align: left;
      // height: 76rpx;
      overflow: hidden;
    }

    .text-right1 {
      width: 68%;
    }
  }

  .flex-text {
    padding-top: 24rpx;
    display: flex;
    color: #999;

    text {
      color: #333;
      display: inline-block;
    }
  }

  .deal-btn {
    width: 22vw;
  }

  .report-btn {
    width: 36vw;
  }

  .bor-top {
    display: flex;
    align-items: center;
    padding-top: 20rpx;
    border-top: 1px solid #d5d7e3;
  }
}
</style>
